<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	modelVisible: Boolean
})
const emits = defineEmits(['showModel'])
const typeCheck = ref(1)
const queryNmme = ref('')
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
	multipleSelection.value = val
}
const tableData = ref([
	{
		name: '夏小飞',
		avater: 'https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/60',
		status: 1
	}
])
const searchTableData = ref([
	{
		name: '夏小飞',
		avater: 'https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/60',
		status: 1
	}
])
const remind = () => {
	ElMessage({ message: '提醒成功', type: 'success', duration: 1500 })
}
const changStatus = (val) => {
	tableData.value = searchTableData.value.filter((item) => {
		return item.status === val
	})
}
</script>
<template>
	<div class="model-box">
		<el-dialog
			v-model="props.modelVisible"
			title="提醒领取"
			@close="emits('showModel', false)"
			width="700px"
			:center="true"
		>
			<div class="link-body">
				<div class="header">
					<el-icon class="icon-wrap"><Bell /></el-icon>
					<p class="text">推广任务将通过「提醒」提醒员工领取个人的推广链接或二维码</p>
				</div>
				<div class="share-dialog-content">
					<div class="dialog-check">
						<el-radio-group v-model="typeCheck" size="large" @change="changStatus">
							<el-radio-button :label="1"> 未领取（1人）</el-radio-button>
							<el-radio-button :label="2">已领取（0人）</el-radio-button>
						</el-radio-group>
					</div>
					<div class="dialog-input">
						<el-input
							style="width: 220px; height: 34px; margin-right: 15px"
							v-model="queryNmme"
							class="w-50 m-2"
							placeholder="搜索员工名称"
							:suffix-icon="Search"
						/>
						<el-tooltip
							effect="light"
							content="<span style='font-size:14px'>将提醒未领取的成员领取专属海报</span>"
							raw-content
							placement="bottom-end"
						>
							<el-button type="primary" style="height: 36px" plain>批量提醒</el-button>
						</el-tooltip>
					</div>
				</div>
				<div class="dialog-table">
					<el-table
						ref="multipleTableRef"
						:data="tableData"
						style="width: 100%"
						border
						@selection-change="handleSelectionChange"
					>
						<el-table-column type="selection" width="55" />
						<el-table-column width="198">
							<template #header> 员工（{{ tableData.length }}） </template>
							<template #default="scope">
								<div class="table-staff">
									<img :src="scope.row.avater" alt="" />
									{{ scope.row.name }}
								</div>
							</template>
						</el-table-column>
						<el-table-column property="name" label="领取状态" width="198">
							<template #default="scope">{{ scope.row.status === 1 ? '未领取' : '已领取' }}</template>
						</el-table-column>
						<el-table-column property="address" label="操作" width="198" align="right">
							<template #default="scope"><el-button @click="remind" type="primary" link>提醒领取</el-button></template>
						</el-table-column>
						<template #empty>
							<div class="table-null">
								<div class="table-null-box">
									<img style="margin: 0; width: 80px" src="../../../../assets/img/img/list-empty.499dbb25961c.png" />
									<p>没有搜索到相关的数据哦～</p>
								</div>
							</div>
						</template>
					</el-table>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
.link-body {
	margin-top: -10px;
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 33px;
		padding-left: 16px;
		background-color: #effaff;
		color: rgba(0, 0, 0, 0.65);
		.icon-wrap {
			font-size: 16px;
			color: #1890ff;
		}
		.text {
			margin-left: 7px;
			font-size: 13px;
		}
	}
	.share-dialog-content {
		display: flex;
		justify-content: space-between;
		margin-top: 24px;
		.dialog-input {
			display: flex;
			align-items: center;
		}
	}
	.dialog-table {
		margin-top: 16px;
		.table-staff {
			display: flex;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.65);
			img {
				width: 38px;
				height: 38px;
				border-radius: 2px;
				margin-right: 8px;
			}
		}
		.table-null-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
